import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button, Form,Row, InputNumber, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import '../less/member.less';
import AddCity from '../window/room/AddCity';

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    index:i+1,
    room: `彼岸-19-3-00 ${i}`,
    user: `张峥话${i}`,
    project:'物业费',
    status:i%2?'已缴费':'未缴费',
    lastTime:'2016-10-25',
    nextTime:'2016-10-16'
  });
}

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

class PayTimeInfo extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {

  }
  _showUser(record,index){
      this.props.showMask(<AddCity />);
  }
  _getColumn(){
      let _self = this;
      const columns = [{
        title: '编号',
        dataIndex: 'index',
      }, {
        title: '房源',
        dataIndex: 'room',
      }, {
        title: '业主',
        dataIndex: 'user',
      }, {
        title: '续费项目',
        dataIndex: 'project',
      }, {
        title: '续费状态',
        dataIndex: 'status',
      }, {
        title: '上次缴费时间',
        dataIndex: 'lastTime',
      }, {
        title: '下次应缴费时间',
        dataIndex: 'nextTime',
      }, {
        title: '操作',
        dataIndex: 'options',
        render(text,record,index) {
          return <div><a href="#" style={{color:'#FF1410',marginRight:10}}>删除</a><a href="javascript:void(0);" onClick={_self.gotoForm.bind(_self,record,index)}>生成催费单</a></div>;
        },
      }];
      return columns;
  }
  gotoForm(record,index){
      this.props.changeAdd(false);
  }
  render() {
    return (
        <div className="containerConten">
          <div className="memHead">
            <Breadcrumb>
              <Breadcrumb.Item>物业管理</Breadcrumb.Item>
              <Breadcrumb.Item>收费项目</Breadcrumb.Item>
            </Breadcrumb>
            <div className="rightOption">
                <ul>
                    <li onClick={this._showUser.bind(this)}>新建收费项目</li>
                </ul>
            </div>
          </div>
          <div className="memContent">
            <div className="memTable">
                <div className="memTableContent">
                    <div className="memSearch">
                      <Form inline onSubmit={this.handleSubmit}>
                        <Row>
                          <Col span={24}>
                              <FormItem
                                label="房源名称"
                              >
                                  <Input placeholder="请输入搜索关键字"/>
                              </FormItem>
                              <FormItem>
                                  <Button type="primary" htmlType="submit">查询</Button>
                              </FormItem>
                              <FormItem
                                label="起止时间"
                              >
                                  <DatePicker />
                              </FormItem>
                              <FormItem>
                                  <DatePicker />
                              </FormItem>
                              <FormItem>
                                  <Button type="primary" htmlType="submit">时间段缴费状态</Button>
                              </FormItem>
                              <Button style={{float:'right',color:'#FF1410'}}>清空</Button>
                          </Col>
                          <Col span={24} style={{marginTop:10}}>
                              <FormItem
                                label="业主名称"
                              >
                                  <Input placeholder="请输入搜索关键字"/>
                              </FormItem>
                              <FormItem>
                                  <Button type="primary" htmlType="submit">查询</Button>
                              </FormItem>
                              <FormItem
                                label="收费标准"
                              >
                                  <Input placeholder="请输入搜索关键字"/>
                              </FormItem>
                              <FormItem>
                                  <Button type="primary" htmlType="submit">应缴费数据</Button>
                              </FormItem>
                          </Col>
                        </Row>

                      </Form>
                    </div>
                    <Table columns={this._getColumn()} dataSource={data} pagination={pagination}/>
                </div>
            </div>
          </div>
        </div>
    );
  }
}

export default PayTimeInfo;
